<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定样式</title>
    <script src="../vue.js"></script>
    <style>
        .basic{
            width: 100px;
            height: 120px;
            border: 1px solid #000;
        }

        .bgc1{
            background-color: #094;
        }
        .bgc2{
            background-color: aqua;
        }
        .bgc3{
            background-color: gold;
        }
        


        .border{
            border-radius: 10px;
            background-color: aquamarine;
        }
        .word{
            font-size: 20px;
            text-align: center;
            line-height: 120px;
        }
        .color{
            color: crimson;
        }
    </style>
</head>

<body>
    <!-- 
        绑定样式：
            1、class样式
                写法：
                    :class='xxx' xxx可以是字符串、对象、数组。
                    字符串写法适用于：类名不确定，要动态获取。
                    对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
                    数组写法适用于：要绑定多个样式，个数确定，名字也确定，但是不确定用不用。
            2、style样式
                写法： 
                    :style="{fontSize:xxx}"其中xxx是动态值。
                    :style="[a,b]"其中a、b是样式对象。
     -->
    <div id="root">
        <!-- 绑定class样式--字符串写法，适用于：样式不确定，需要动态指定 -->
        <div class="basic" :class="a" @click="change">{{name}}</div>
        <br><br>
        <!-- 绑定class样式--数组写法，适用于：绑定样式个数不确定、类名不确定 -->
        <div class="basic" :class="classArr">{{name}}</div>
        <br><br>
        <!-- 绑定class样式--对象写法，适用于：绑定样式个数确定、类名确定，但要动态决定用不用 -->
        <div class="basic" :class="classObject">{{name}}</div>
        <br><br>
        <!-- 绑定style样式--对象写法 -->
        <div class="basic" :style="styleObject">{{name}}</div>
        <br><br>
        <!-- 绑定style样式--数组写法 -->
        <div class="basic" :style="styleArr">{{name}}</div>
        <br><br>
        <div class="basic" :style="[styleObject,styleObject1]">{{name}}</div>

    </div>
    <script>
        Vue.config.productionTip=false;
        new Vue({ 
            el: '#root',
            data: {
                name:'黑马程序员',
                a:'bgc1',
                classArr:['border','word','color'],
                classObject:{
                    border:false,
                    word:true,
                    color:true,
                },
                styleObject:{
                    fontSize:'30px',
                },
                styleObject1:{
                    color:'red',
                },
                styleArr:[
                    {fontSize:'30px'},
                    {color:'gold'},
                ]
            },
            methods: {
                change(){
                    const arr=['bgc1', 'bgc2','bgc3']
                    this.a=arr[Math.floor(Math.random()*3)]
                }
            },
        })
    </script>
</body>

</html>